<template>
  <div>
    <div class="register-form">
      <el-form
        label-width="auto"
        :model="user"
        :rules="rules"
        ref="userForm"
      >
        <el-form-item
          label="username:"
          class="form-register-item"
          prop="username"
        >
          <el-input
            v-model="user.username"
            placeholder="请输入用户名"
          ></el-input
          ><br />
        </el-form-item>
        <el-form-item label="password:" class="form-register-item" prop="password">
          <el-input
            placeholder="请输入密码"
            v-model="user.password"
            show-password
          ></el-input
          ><br />
        </el-form-item>
        <el-form-item label="email:" class="form-register-item" prop="email">
          <el-input placeholder="请输入邮箱:" v-model="user.email"></el-input
          ><br />
        </el-form-item>
        <el-form-item label="tel:" class="form-register-item" prop="tel">
          <el-input placeholder="请输入电话" v-model.number="user.tel"></el-input
          ><br />
        </el-form-item>
        <div class="reg-button">
          <!-- <el-button type="primary" @click="register">Regitser</el-button> -->
          <el-button type="primary" @click="submitForm('userForm')">Regitser</el-button>
          <el-button type="primary" @click="toLogin">toLogin</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import {checkUsernameCommon} from '@/service.js'
export default {
  name: "Register",
  data() {
    const checkUsername = async function(rule,value,callback){
        const params = {
            username: value
        }
        const res = await checkUsernameCommon(params);
        if(res.data.code == 1){
            callback(new Error(res.data.message))
        }
    }
    return {
      rules: {
        username: [
          // { required: true, message: "请输入用户名", trigger: "blur" },
          // { min: 6, max: 10, message: "长度在 6 到 10 个字符", trigger: "blur" }
            { validator: checkUsername, trigger: 'blur' ,required: true}
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 5, max: 10, message: "长度在 6 到 10 个字符", trigger: "blur" }
        ],
        email: [
          { type: "email",required: true, message: "请输入正确的邮箱地址", trigger: ["blur","change"] },
        ],
        tel: [
          { required: true, message: "请输入正确的电话", trigger: "blur" },
          { message: "请输入正确的电话", pattern: /^\d{11}$/ ,trigger:["blur","change"]} 
        ]
      },
      user: {
        username: "",
        password: "",
        email: "",
        tel: ""
      }
    };
  },
  methods: {
    toLogin() {
      this.$emit("toLogin")
    },
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.register();
          } else {
            this.$message.warning('请补全个人信息哦');
            return false;
          }
        });
      },
    register() {
      this.$axios({
        method: "post",
        url: "/user/register",
        data: this.user
      }).then(res => {
        if (res.data.code == 0) {
            this.$message.success('注册成功');
          // this.$router.push({ path: "/login" });
          this.toLogin();
        }else{
            this.$message.error('注册失败');
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@keyframes firstDisplay {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
.register-form {
  animation: firstDisplay 1.5s ease-in-out 1;
  .reg-button {
    text-align: right;
  }
}
</style>
